<template>
  <div class="app-container" v-loading="loading" element-loading-text="加载中...">
    <el-page-header content="报修单" @back="$router.back()" />

    <el-card shadow="never" class="mb16" header="基本信息">
      <el-descriptions :column="3" border>
        <el-descriptions-item label="报修单号">{{ data.reportNo }}</el-descriptions-item>
        <el-descriptions-item label="资产编号">{{ data.assetNo }}</el-descriptions-item>
        <el-descriptions-item label="类型">{{ data.assetTypeName || typeName(data.assetType) }}</el-descriptions-item>
        <el-descriptions-item label="名称">{{ data.assetName }}</el-descriptions-item>
        <el-descriptions-item label="位置">{{ data.location }}</el-descriptions-item>
        <el-descriptions-item label="使用部门">{{ data.deptName }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card shadow="never" class="mb16" header="故障信息">
      <el-descriptions :column="3" border>
        <el-descriptions-item label="发生时间">{{ data.occurTime }}</el-descriptions-item>
        <el-descriptions-item label="报修人">{{ data.reporter }}</el-descriptions-item>
        <el-descriptions-item label="紧急程度">{{ data.urgencyName }}</el-descriptions-item>
        <el-descriptions-item label="报修类型">{{ data.reportTypeName }}</el-descriptions-item>
        <el-descriptions-item label="报修时间">{{ data.reportTime }}</el-descriptions-item>
        <el-descriptions-item label="故障描述" :span="3">{{ data.faultDescription }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card shadow="never" class="mb16" header="故障图片">
      <image-upload ref="image" v-model="images" :limit="5" :readonly="true" />
    </el-card>

    <div style="text-align:right;">
      <el-button @click="$router.back()">返回</el-button>
    </div>
  </div>
</template>

<script>
import { getOrder } from '@/api/repair/order'
import ImageUpload from '@/views/components/ImageUpload.vue'

export default {
  name: 'OrderDetail',
  components: { ImageUpload },
  data() {
    return { 
      data: {}, 
      images: [],
      loading: true
    }
  },
  async created() {
    const orderNo = this.$route.params.orderNo || this.$route.query.orderNo || this.$route.params.reportNo
    this.loading = true
    try {
      const res = await getOrder(orderNo)
      this.data = res.data || {}
      // 处理图片数据
      const urls = (this.data.imageUrls ? JSON.parse(this.data.imageUrls) : [])
      this.images = (urls || []).map(u => ({ 
        name: String(u).split('/').pop(), 
        url: u, 
        rawName: u 
      }))
      
      // 延迟初始化图片组件
      this.$nextTick(() => {
        if (this.$refs.image && typeof this.$refs.image.initFromUrls === 'function') {
          this.$refs.image.initFromUrls(urls)
        }
      })
    } catch (error) {
      console.error('加载报修单详情失败:', error)
      this.$message.error('加载数据失败，请重试')
    } finally {
      this.loading = false
    }
  },
  methods: {
    typeName(code) {
      const m = {
        EQ_TYPE_001: '数控机床',
        EQ_TYPE_002: '注塑机',
        EQ_TYPE_003: '空压机',
        EQ_TYPE_004: '冷却塔',
        EQ_TYPE_005: '输送带'
      }
      return m[code] || code || ''
    }
  }
}
</script>


